<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>文件管理--${fns:getConfig('productName')}</title>
<%@ include file="/common/meta.jsp"%>
<link rel="stylesheet" type="text/css" href="${ctx}/styles/css/default.css">
<link href="${ctx}/styles/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="${ctxStatic}/jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
<script src="${ctx}/js/fileinput.js" type="text/javascript"></script>
<script src="${ctx}/js/zh.js" type="text/javascript"></script>
<script src="${ctx}/js/zh-TW.js" type="text/javascript"></script>
<script src="${ctx}/js/bootstrap.min.js" type="text/javascript"></script>
<%@ include file="/common/jqGridHead.jsp"%>
<script src="${ctxStatic}/js/attachment/attachment.js" type="text/javascript"></script>
<style type="text/css">
	#mainForm table{
		width:98%;
		text-align:center;
		margin-left:1%;
		margin-top:5px;
		border:1px solid #ccc;
		background:#F5F5F5;
	}
	#mainForm table:hover{box-shadow:0 1px 5px #aaa;}
	#mainForm tr{
	 	height:35px;
	}
	.td1{
		width:14%;
		font-weight:bolder;
	}
	.td1 div{
	 	padding: 3px;
	 	text-align: left;
	}
	.td1 img{width:100%;
		border-radius:10px;
	}
	.td2{
		width:7%;
		font-weight:bolder;
		text-align:right;
		color:#555;
	}
	.td3{
		width:14%;
	}
	.td4{
		width:9%;
	}
	.tdl,.td4{
		border-right: 1px solid #ccc;
	}
	.td2,.td3,.td4,.tdl,.tdd{
		font-size:14px;
	}
	.td3,.td4,.tdl,.tdd{
		text-align:left;
		padding-left: 5px;
		color:#666;
	}
	.td1 i{display:inline-block;vertical-align:middle;width:0;height:100%;overflow:hidden;position:relative}
	.td1 img{vertical-align:middle;position:relative;max-width:80%;max-height:100%}
	
	div.view{
		white-space:nowrap; 
		max-width:11em; 
 		overflow:hidden;  
 		line-height: 20px;
	}
	div.view-name{
		white-space:nowrap; 
		max-width:40em; 
 		overflow:hidden; 
 		line-height: 20px; 
	}
	#imgshow{
	 	position:fixed;
	 	left:40%;
		background:#fff;
		border:4px solid #fff;
		background-color:#fff;
		background-image:url(../images/lightbox-ico-loading.gif);
		background-repeat:no-repeat;
		background-position:center center;
		box-shadow:0px 0px 5px #000;
		display:none;
	}
	#imgshow img{
		width:100%;
		height:100%;
		border:none;
		display:none;
	}
	.pagination{margin-left:18px;}
</style>
</head>
<body>
	<c:set var="flag" value="false" />  
	<ul class="nav nav-tabs" style="margin:0 4px 4px 4px;">
		<c:forEach items="${list}" var="menu"  varStatus="idxStatus">
			<li class="${menu.tag eq tag?'active':''}">
				<a href="${ctx}/${menu.href}${fn:indexOf(menuChild.href, '?') eq -1?'?':'&'}left=${fns:encodeParamUrl(left)}&top=${top}&parentId=${fns:encodeParamUrl(parentId)}&LId=${fns:encodeParamUrl(LId)}&filter_EQS_tag=${menu.tag}">
					<i class="icon icon-list" style="margin-right:10px"></i><span>${menu.name}</span>
				</a>
			</li>
			<c:if test="${menu.tag eq tag && menu.remark=='public'}">
				<c:set var="flag" value="true"></c:set>  
			</c:if>
		</c:forEach>
	</ul>
    <tags:message content="${msg}" />
	<form id="mainForm"  role="form" method="get" style="" action="${ctx}/attachment/listInfo.do">
		<div class="breadcrumb form-search" style="background-color: #f5f5f5;">
			<div>
				<label>关键字:</label>
				<input type="text"  name="filter_LIKES_fileName_OR_fileOrg_OR_ownOrg_OR_type_OR_uploadPerson_OR_tableField" value="${fns:encodeParamHtmlAttribute(param['filter_LIKES_fileName_OR_fileOrg_OR_ownOrg_OR_type_OR_uploadPerson_OR_tableField'])}" placeholder="文件查询" />
					<button id="btnSearch" name="btnSearch" type="submit" class="btn btn-primary" >查询</button>
					<c:forEach items="${list}" var="menu"  varStatus="idxStatus" >
						<c:if test="${flag}">
							<a href="#javascript:void(0)" onclick= "openModal();" id="uploadAttachment" class="btn btn-primary" role="button" >上传附件&nbsp;
								<i class="icon-upload" style=" margin-top:4px"></i>
							</a>
							<c:set var="flag" value="false"></c:set>  
						</c:if>
					</c:forEach>
			</div>
		</div>
	<c:forEach items="${page.result}" var="attachment" varStatus="var">
	<table >
		<tr>
			<td rowspan="5" class="td1">
				<div >
					<img class="img" src="${scale}/scaleImage/${attachment.scaleImagePath}" onerror="javascript:this.src='${scale}/scaleImage/123.jpg';"/>
					<img src="${scale}/scaleImage/${attachment.scaleImagePath}" style="display:none" />
				</div>
			</td>
			<td class="td2">文件名：</td>
			<td colspan="7" class="tdl">
				<div class="view-name" style="text-overflow:ellipsis;">
					<a href="${ctx}/documentView.jsp?fileName=${fns:encodeParamUrl(attachment.upfileFileName)}&swfPath=${fns:encodeParamUrl(attachment.swfPath)}" target="_blank">${attachment.upfileFileName}</a>
				</div>
<!-- 				<div class="view-name" style="text-overflow:ellipsis;"> -->
<%-- 					<c:if test="${attachment.type eq 'pdf'}"> --%>
<%-- 						<a href="${pdfview}/web/viewer.html?file=${scale}/attachment/${attachment.pdfPath}" target="_blank">${attachment.upfileFileName}</a> --%>
<%-- 					</c:if> --%>
<%-- 					<c:if test="${attachment.type ne 'pdf'}"> --%>
<%-- 						<a href="${pdfview}/web/viewer.html?file=${scale}/pdf/${attachment.pdfPath}" target="_blank">${attachment.upfileFileName}</a> --%>
<%-- 					</c:if> --%>
<!-- 				</div> -->
			</td>
			<td rowspan="5">
				<a href="javascript:void(0)" onclick="updateAttachment('${attachment.id}');">编辑</a>
				<br><br><br>
				<a href="javascript:void(0)" onclick="delAttachment('${attachment.id}');" >删除</a>
				<br><br><br>
				<a href="${ctx}/attachment/download.do?attId=${attachment.id}">下载</a>
			</td>
		</tr>
		<tr>
			<td class="td2">发文单位：</td>
			<td class="td3">
				<div class="view" style="text-overflow:ellipsis;">${attachment.fileOrg }</div>
			</td>
			<td class="td2">发文日期：</td>
			<td class="td3">
				<div class="view" style="text-overflow:ellipsis;">${attachment.fileTime }</div>
			</td>
			<td class="td2">所属单位：</td>
			<td class="td3">
				<div class="view" style="text-overflow:ellipsis;">${attachment.ownOrg }</div>
			</td>
			<td class="td2">上传用户：</td>
			<td class="td4">
				<div class="view" style="text-overflow:ellipsis;">${attachment.uploadPerson }</div>
			</td>
		</tr>
		<tr>
			<td class="td2">文件号：</td>
			<td class="td3">
				<div class="view" style="text-overflow:ellipsis;">${attachment.fileNo }</div>
			</td>
			<td class="td2">卷 号：</td>
			<td class="td3">
				<div class="view" style="text-overflow:ellipsis;">${attachment.reelNumber }</div>
			</td>
			<td class="td2">文件类型：</td>
			<td class="td3">
				<div class="view" style="text-overflow:ellipsis;">${attachment.type }</div>
			</td>
			<td class="td2">第X本：</td>
			<td class="td4">
				<div class="view" style="text-overflow:ellipsis;">${attachment.number }</div>
			</td>
		</tr>
		<tr>
			<td class="td2">关键字：</td>
			<td colspan="3" class="tdd">
				<div class="view-name" style="text-overflow:ellipsis;">${attachment.keyWords }</div>
			</td>
			<td class="td2">备注：</td>
			<td class="td3">
				<div class="view" style="text-overflow:ellipsis;">${attachment.remark }</div>
			</td>
			<td class="td2">文件大小：</td>
			<td class="td4">${attachment.size }</td>
		</tr>
		<tr>
			<td class="td2">文件描述：</td>
			<td colspan="7" class="tdl">
				<div class="view" style="text-overflow:ellipsis;">${attachment.fileDesc }</div>
			</td>
		</tr>
	</table>
	</c:forEach>
	<%@ include file="/common/page.jsp"%>
	</form>
   <form id="fileForm" name="fileForm">
   <input type="hidden" name="token" value="${token}" id="token">
   <input type="hidden" name="attId" id="attId" value="">
   <input type="hidden" name="tag" id="tag" value="${tag}">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" style="width:1000px;max-height:700px">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">新增/修改文件</h4>
					</div>
					<div class="modal-body">
						<table class="table"  style="border: none;margin-bottom: -14px">
							<tbody>
								<tr>
									<td  id="eremark">选择文件:</td>
									<td colspan="3">
									<input id="file-0a" class="file" name="file" type="file" data-min-file-count="1">    
									</td>
								</tr>
								<tr>
									<td  id="efileOrg" >发文单位<font color="red">&nbsp;*</font>:</td>
									<td  class="eminput" style="width:350px">
										<input name="fileOrg" id="fileOrg" maxlength="40" type='text' value="" class="required">
									</td>
									<td id="efileNo">文件编号<font color="red">&nbsp;*</font>:</td>
									<td style="width:350px">
										<input name="fileNo" id="fileNo" maxlength="50" type='text' value="" class="required">
									</td>
								</tr>
								<tr>
									<td  id="ereelNumber">卷　　号:</td>
									<td  class="eminput">
										<input name="reelNumber" id="reelNumber" maxlength="40" type='text' value="" >
									</td>
									<td id="enumber">　第X本:</td>
									<td>
										<input name="number" id="number" maxlength="10" type='text' value="">
									</td>
								</tr>
								<tr>
									<td  id="efileTime">发文日期<font color="red">&nbsp;*</font>:</td>
									<td  class="eminput">
										<input  id="fileTime" name="fileTime" value="" class="required"
										onclick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd'})" class="Wdate" type="text">
									</td>
									<td id="eownOrg">所属单位<font color="red">&nbsp;*</font>:</td>
									<td>
										<input name="ownOrg" id="ownOrg" maxlength="40" type='text' value="" class="required">
									</td>
								</tr>
								<tr>
									<td  id="eremark">备注:</td>
									<td colspan="3">
										<input name="remark" id="remark" maxlength="50" type='text' value="" >
									</td>
								</tr>
								<tr>
									<td  id="eremark">文件描述:</td>
									<td  colspan="3" >
										<div class="wordCount wyInline" id="wordCount">
											<textarea placeholder="文件内容描述" rows='3' id="fileDesc"
												name="fileDesc"></textarea>
											<span class="wordwrap"><var class="word">512</var>/512</span>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="modal-footer" style="padding:4px 15px 5px;">
						<button type="button" class="btn btn-default" data-dismiss="close">关闭</button>
						<button type="button" class="btn btn-danger" onclick="del();" style="display:none;" id="delAttachment">删除</button>
						<button type="submit" class="btn btn-primary" id="sub" >提交</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
		<div id="imgshow"><img></div>
</form>
	<script type="text/javascript">
	    var path = "${ctx}";
	    var tag = "${tag}";
		$(document).ready(function()
		{
	 		
			wordCount();  //统计textarea中的字数
			$("#fileOrg").focus();
			$("#fileForm").validate({
				debug:true,
				rules: {
					
				},
				messages: {
					
				},
				submitHandler:function(form){
					if(checkFileName('file')||$('#attId').val()!=''){
						$('#sub').attr('disabled','disabled');  //防止重复提交，请求完毕之前禁用提交按钮
						attachmentSubmit();
					}
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
			
			//预览图片
			$('#mainForm .img').hover(function(){
				var WH = document.documentElement.clientHeight-200;
				var WW = document.documentElement.clientHeight*0.8;
				var Imgratio = $(this).width()/$(this).height();
				var imgshowsrc = $(this).attr('src');
				var img = new Image();
				img.src=imgshowsrc;
				function imgshow(w,h,ratio){
					$('#imgshow')[0].style.height=h+'px';
					$('#imgshow')[0].style.width=w+'px';
					$('#imgshow img')[0].src=imgshowsrc;
					$('#imgshow').show();
					$('#imgshow')[0].style.top=(WH-$('#imgshow')[0].offsetHeight+ratio)/2+'px';
					img.onload=function(){$('#imgshow img').fadeIn();}
				}
				$(this).width()>$(this).height()?imgshow(WW,WW/Imgratio,200):imgshow(WH*Imgratio,WH,250);
			},function(){
				$('#imgshow').hide();
				$('#imgshow img').hide();
			});
		});
	</script>
</body>
</html>